<template>
	<div class="container">
		<Sparklines
			:width="props.width"
			:height="height"
			:indicatorStyles="props.spIndicatorStyles"
			:tooltipProps="props.spTooltipProps"
		>
			<SparklineCurve
				:data="props.spData"
				:limit="props.spData.length"
				:styles="props.spLineStyles"
				:textStyles="props.spTextStyles"
				:spotStyles="props.spSpotStyles"
				:refLineStyles="props.spRefLineStyles"
				:refLineType="props.spRefLineType"
				:spotProps="props.spSpotProps"
			/>
		</Sparklines>
	</div>
</template>

<script setup lang="ts" name="SparklinesCom">
const props = defineProps({
	width: {
		type: String,
		default() {
			return '120'
		}
	},
	height: {
		type: String,
		default() {
			return '60'
		}
	},
	spData: {
		type: Array,
		default() {
			return []
		}
	},
	spIndicatorStyles: {
		type: Object,
		default() {
			return {}
		}
	},
	spLineStyles: {
		type: Object,
		default() {
			return {}
		}
	},
	spTooltipProps: {
		type: Object,
		default() {
			return {
				formatter() {
					return ''
				}
			}
		}
	},
	spSpotStyles: {
		type: Object,
		default() {
			return {}
		}
	},
	spRefLineStyles: {
		type: Object,
		default() {
			return {}
		}
	},
	spSpotProps: {
		type: Object,
		default() {
			return {}
		}
	},
	spTextStyles: {
		type: Object,
		default() {
			return {}
		}
	},
	spRefLineType: {
		type: String,
		default() {
			return ''
		}
	}
})
</script>
<style>
.container {
	padding: 20px;
}
</style>
